Problem

Currently we have a lot of unnecessary re-renders on our Build and Design Content. Many components are re-rendering despite no changes to their properties. This is caused by the large number of hooks we use in the component.

This causes extreme lag in large forms as the re-renders linearly increments the page rendering time for every single action (dragging, selecting, modifying fields in the admin-form view)

This is especially detrimental for dragging fields, as it can cause the admin view for large forms to be almost impossible to navigate.

Closes #6121

Solution

Move out some of the hooks from FieldRowContainer to its parent BuilderField which are causing most of the unnecessary re-renders

Use react memo to memoize the FieldRowContainer with deep comparison of props.

Breaking Changes

• No - this PR is backwards compatible

Before & After Screenshots

BEFORE:

Large amount of re-render time as seen in the right.

AFTER:

Tests

To ensure the feature works
Use react dev tool -> profiler

• go to a form in your admin view
• start profiler recording
• shift some of the fields around
• stop recording, you should see that most fields are not re-rendered at each step, and they are memoized at the FieldRow level

Go to a large form

• try to drag a field. The dragging of the field (before dropping) should feel smooth, and there should be minimal jitters.

To ensure core features are still intact

• In any storage form, ensure the following functionality is still working
  • Create a new field
  • Edit the field properties of any field
  • Edit the field properties, do not save, click away (close the drawer or select another field) the discard editing modal should appear
  • Drag a field to change its position, field id should be updated too
  • Duplicate a field
  • Attempt to delete a field, the modal should open, and can be cancelled
  • Delete the field, modal should open, and field can be deleted
  • Preview the form. Make a submission
  • Open the form to respondents. Make a submission
• Do the same steps above for an email form
• Do the same steps on mobile

Notes

There are still a few unnecessary re-renders upon drag and dropping of the fields.

Ideally, only the fields affected (field id changed) should re-render and all other fields should be unaffected. However, currently there is still some existing hooks that causes a re-render for all the fields even if they are memoized